<script>
//编辑组件页面
import CardEditLeftSider from './CardEditLeftSider';
import CardEditRightSider from './CardEditRightSider';
import ChartCard from '../../card/ChartCard';
import WorkSpaceQuery from '@/mixins/WorkspaceQuery';
import * as types from '@/store/types';
import * as utils from '@/utils/helps';

export default {
  name: 'ChartCardEdit',
  components: {
    CardEditLeftSider,
    CardEditRightSider,
    ChartCard,
  },
  mixins: [WorkSpaceQuery],
  data() {
    return {
      dimension: [],
      metrics: [],
      sheetFieldList: [],
      isInitialized: false,
    };
  },
  computed: {
    allControl() {
      return this.$store.getters.controls;
    },
    controls() {
      if (Object.keys(this.allControl).length !== 0) {
        if (this.$store.getters.currentId === '') {
          this.$store.commit(types.UPDATA_APPLY_CURRENTID, this.$router.history.current.params.id);
          return this.allControl[this.$router.history.current.params.id];
        } else {
          return this.allControl[this.$store.getters.currentId];
        }
      } else {
        return {
          appearance: {
            type: '',
          },
        };
      }
    },
    appData() {
      return this.$store.state.app.appData;
    },
  },
  watch: {
    controls(newVal) {
      if (newVal.options.data && newVal.options.data.rows.length !== 0) {
        this.initControl(newVal);
      }
    },
  },
  beforeMount() {
    if (Object.keys(this.allControl).length === 0) {
      this.getLastAppData();
    } else {
      const controlData = this.allControl[this.$store.getters.currentId];
      this.initControl(controlData);
    }
  },
  mounted() {
    this.$nextTick(() => {
      window.dispatchEvent(new Event('resize'));
    });
  },
  methods: {
    initControl(newVal) {
      if (!this.isInitialized) {
        this.dimension = newVal.options.settings.dimension;
        this.metrics = newVal.options.settings.metrics;
        this.setFieldList(newVal.options.data.rows[0]);
        this.isInitialized = true;
      }
    },
    setFieldList(list) {
      const data = utils.deepCopy(list);
      this.sheetFieldList = [];
      for (let k of Object.keys(data)) {
        this.sheetFieldList.push({ value: k, label: k });
      }
    },
    gotoCard() {
      this.$router.push('/workspace/' + this.appData.id);
      this.$nextTick(() => {
        this.$events.emit('on-intoEdit', false);
      });
    },
    // 保存应用
    saveCard() {
      this.upDataAppConfig(
        {
          path: `${window.location.origin}/workspace/${this.appData.id}`,
          info: JSON.stringify(this.allControl),
        },
        {
          id: this.appData.id,
        }
      );
    },
    updataChartConfig() {
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.$store.getters.currentId]: this.controls },
      });
    },
    dimensionChange(item) {
      this.controls.options.settings.dimension = [];
      this.controls.options.settings.dimension = item;
      this.updataChartConfig();
    },
    metricsChange(item) {
      this.controls.options.settings.metrics = [];
      this.controls.options.settings.metrics = item;
      this.updataChartConfig();
    },
  },
};
</script>
<template>
  <div class="layout">
    <Layout>
      <Header>
        <Row>
          <Col span="2">
          <Button
            type="text"
            title="返回"
            @click="gotoCard"
          >
            <Icon
              type="arrow-left-a"
              size="36"
              color="#ffffff"></Icon>
          </Button>
          </Col>
          <Col span="4">
          <h1 style="color:white">编辑图表</h1>
          </Col>
          <Col span="16">
          <div style="width:100%"></div>
          </Col>
          <Col
            span="2"
            style="float:right">
          <Button
            type="text"
            title="保存"
            @click="saveCard"
          >
            <Icon
              type="document"
              size="36"
              color="#ffffff"></Icon>
          </Button>
          <Dropdown
            transfer
            trigger="click">
            <Button
              type="text"
              title="导出">
              <Icon
                type="android-more-vertical"
                size="36"
                color="#ffffff"></Icon>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem name="exportComponent">导出组件</DropdownItem>
              <DropdownItem name="exportConfig">导出配置</DropdownItem>
            </DropdownMenu>
          </Dropdown>
          </Col>
        </Row>
      </Header>
      <Layout>
        <Sider
          class="sider-left"
          hide-trigger
        >
          <CardEditLeftSider :field-list="sheetFieldList"></CardEditLeftSider>
        </Sider>
        <Layout class="sider-content">
          <Content :class="{'card-edit-content':true}">
            <div class="content-top">
              <Row>
                <Col span="1">
                <span>维度</span>
              </Col>
                <Col span="23">
                <Select
                  v-model="dimension"
                  multiple
                  transfer
                  @on-change="dimensionChange">
                  <Option
                    v-for="(item, index) in sheetFieldList"
                    :value="item.value"
                    :key="index">{{ item.label }}</Option>
                </Select>
              </Col>
              </Row>
              <Row>
                <Col span="1">
                <span>数值</span>
              </Col>
                <Col span="23">
                <Select
                  v-model="metrics"
                  multiple
                  transfer
                  @on-change="metricsChange">
                  <Option
                    v-for="(item, index) in sheetFieldList"
                    :value="item.value"
                    :key="index">{{ item.label }}</Option>
                </Select>
              </Col>
              </Row>
            </div>
            <div class="card-edit-item">
              <ChartCard
                :type="controls?controls.appearance.type:''"
                :all-options="controls.options"></ChartCard>
            </div>
          </Content>
        </Layout>
        <Sider
          class="sider-right"
          hide-trigger
        >
          <CardEditRightSider></CardEditRightSider>
        </Sider>
      </Layout>
    </Layout>
  </div>
</template>

<style lang="less" scoped>
.layout {
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
}

.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}

.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}

.k-layout {
  height: calc(~'100vh');
}

.sider-left,
.sider-right {
  background-color: #e8ebed;
}

.sider-right {
  width: 320px !important;
  min-width: 200px !important;
  max-width: 400px !important;
  flex: 0 0 320px !important;
}

.content-top {
  height: 100px;
}
.card-edit-content {
  padding: 24px;
  min-height: 300px;
  background: #ffffff;
  .k-row {
    min-height: 60px;
    padding: 10px 0;
    border-bottom: 1px solid #dadcdd;
    > .k-col:first-child {
      padding-top: 6px;
    }
  }
  .card-edit-item {
    min-height: 400px;
    height: calc(~'100vh - 250px');
    margin-top: 30px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  }
}
</style>
